    <template>
      <div style="width: 300px">
        <vxe-select
          v-model="val1"
          placeholder="可搜索虚拟列表"
          :options="opts1"
          clearable
          filterable
          remote
          :remote-config="remoteConfig"
        ></vxe-select>
      </div>
    </template>

    <script lang="ts" setup>
    import { ref } from 'vue'
    import { VxeSelectPropTypes } from 'vxe-pc-ui'
    import XEUtils from 'xe-utils'

    const val1 = ref()
    const opts1 = ref<VxeSelectPropTypes.Options>([])

    let idKey = 1

    // 总数据模拟（10 万条）
    const allData = XEUtils.range(0, 100000).map(() => ({
      value: idKey,
      label: `选项${idKey++}`
    }))
    console.log(allData);
    

    // 远程搜索配置，模拟分页（每次返回前 100 条）
    const remoteConfig: VxeSelectPropTypes.RemoteConfig = {
      queryMethod: ({ searchValue }) => {
        return new Promise<void>(resolve => {
          setTimeout(() => {
            // 模拟远程筛选 + 截取前100条
            const filtered = allData.filter(item => item.label.includes(searchValue || '')).slice(0, 100000)
            opts1.value = filtered
            resolve()
          }, 200)
        })
      }
    }
    </script>
